<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>电影选项卡</title>
    <script src="../../js/vue.js"></script>
    <style>
        .topbars {
            width: 600px;
            height: 75px;
            background-color: bisque;
            display: flex;
            margin: 50px auto;
        }
        .topbars > div {
            flex-grow: 1;
            line-height: 75px;
            text-align: center;
        }
        .topbars > div:hover {
            background-color: aqua;
        }
        .topbars > .active {
            background-color: aqua;
        }
        .imgDiv > img{
            display: block;
            width: 700px;
            height: 500px;
            margin: 50px auto;
        }



    </style>

</head>
<body>
    <div id="app">

        <div class="topbars">
            <div class="topbar" :class='currentIndex==index?"active":""'  v-for="(item,index) in moviesList" @click="imgChange(index)">{{item}}</div>
        </div>

        <div class="imgDiv">
            <img src="" alt="" :src="imgUrl">
        </div>

    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            currentIndex:0,
            moviesList:['疯狂的麦克斯','加勒比海盗','天空之城','天龙特攻队'],
            imgUrl:'../../img/8.png',
            imgUrls:['../../img/8.png','../../img/11.png'],
            actics:{

            }

        },
        methods: {
            imgChange(key) {
                this.currentIndex = key
                if (this.imgUrls[key] == undefined) {
                    console.log(this.imgUrls[key])
                    this.imgUrl = '../../img/11.png'
                } else {
                    this.imgUrl = this.imgUrls[key]
                }
            }
        }
    })
</script>

</html>